<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
</script>

<template>
  <div class="bg">
    <el-row :gutter="20" class="choice-item">
      <el-col :span="8" :offset="8">
        <router-link to="/manage/home">
          <div class="choice-content">
            <span>管理页面</span>
            <ArrowRight style="width: 1.2em; height: 1.2em" />
            <ArrowRight style="width: 1.2em; height: 1.2em" />
          </div>
        </router-link>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="choice-item">
      <el-col :span="8" :offset="8">
        <router-link to="/operation/home">
          <div class="choice-content">
            <span>污水厂运维页面</span>
            <ArrowRight style="width: 1.2em; height: 1.2em" />
            <ArrowRight style="width: 1.2em; height: 1.2em" />
          </div>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background: url("@/assets/images/choice-bg.png") no-repeat center / cover;
  border-radius: 10px;
  opacity: 0.6;
}
.choice-item {
  height: 50vh;
  width: 100vw;
  .choice-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    margin-top: 20%;
    background: #d3dce6;
    height: 40%;
    border-radius: 4px;
    min-height: 36px;
    background-color: $xtxColor;
    opacity: 0.8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    color: #000;
    i {
      font-size: 14px;
      color: black;
      letter-spacing: -5px;
    }
  }
}
</style>